<template>
	<view class="wrap">
		<u-transition :show="show">
			<view class="content">
				<view class="smlcon">
					<view class="topBox">
						<view class="seachBox">
							<view>
								<u-icon name="search" color="#ccc" size="24"></u-icon>
								<input type="text" placeholder="搜索您想要的商品" placeholder-style="color:#bbb" v-model="search"/>
							</view>
							<text  @click="toPage('searchHistory?goods_name='+search)">搜索</text>
						</view> 
						<u-transition :show="show">
							<view class="msgBox" @click="toPage('msglist')">
								<image src="../../static/images/465.png"></image>
							</view>
						</u-transition>
					</view>
					<view class="page-section-spacing">
						<swiper class="swiper"  
							autoplay="true" 
							interval="3000" 
							duration="500"
							circular="true">
							<swiper-item v-for="item in banner" :key="item.goods_id" @click="lunboimg(item.link_url)">
								<image :src="item.thumb"></image>
							</swiper-item>
						</swiper>
					</view>
					<view class="navbar" :style="Number(navlist.length)>5?'justify-content: flex-start;':''">
						<view v-for="item in navlist" :key="item.id" @click="lunboimg(item.icon_link,item.link_type,item.icon_name)">
							<image :src="item.file_path"></image>
							<view class="icontitle">{{item.icon_name}}</view>
						</view>
					</view>
					<view class="unique">
						<image src="../../static/images/d15.png"></image>
					</view>
					<u-transition :show="show">
						<view class="special-area">
							<!-- <view v-if="zhuanqu.open_purchase==10" @click="toPage('/pages/loot/purchase')">
								<image :src="zhuanqu.purchase_cover_img"></image>
							</view>
							<view>
								<image :src="zhuanqu.experience_cover_img" v-if="zhuanqu.open_experience==10" @click="toPage('/pages/loot/tyleak?type=3')"></image>
								<image :src="zhuanqu.leaky_cover_img" v-if="zhuanqu.open_leaky==10" @click="toPage('/pages/loot/tyleak?type=2')"></image>
							</view> -->
							<view v-if="zhuanqu.open_purchase==10" @click="qianggzq('/pages/loot/purchase')">
								<image :src="zhuanqu.purchase_cover_img"></image>
							</view>
							<view>
								<image :src="zhuanqu.experience_cover_img" v-if="zhuanqu.open_experience==10" @click="qianggzq('/pages/loot/tyleak?type=3')"></image>
								<image :src="zhuanqu.leaky_cover_img" v-if="zhuanqu.open_leaky==10" @click="qianggzq('/pages/loot/tyleak?type=2')"></image>
							</view>
						</view>
					</u-transition>
				</view>
				<view class="shop-con">
					<view class="fenlei">
						<text :class="typenum==-1?'active':''" @click="tabindex(-1,0)">全部</text>
						<text :class="typenum==index?'active':''" @click="tabindex(index,item.category_id)" v-for="(item,index) in categoryList" :key="index">{{item.name}}</text>
					</view>
						<view class="shop_list">
							<view class="every" v-if="loading" v-for="item in 6">
								<view class="cont_center">
									<u-skeleton
										rows="1"
										:title="false"
										:rowsHeight="['335rpx']"
										:rowsWidth="['335rpx']"
										:loading="loading"
										animate
									></u-skeleton>
								</view>
								<view class="every_bot">
									<view class="title">
										<u-skeleton
										rows="1"
										:title="false"
										:rowsHeight="['50rpx']"
										:rowsWidth="['100%']"
										animate
										:loading="loading"></u-skeleton>
									</view>
									<view class="price-con">
										<u-skeleton
										rows="1"
										:title="false"
										:rowsHeight="['50rpx']"
										:rowsWidth="['40%']"
										animate
										:loading="loading"></u-skeleton>
									</view>
								</view>
							</view>
							<view class="every" v-if="!loading" v-for="item in shoplist" :key="item.goods_id" @click="toPage('/pages/classify/goodsdet?id='+item.goods_id)">
								<u-transition :show="show">
									<image :src="item.goods_image"></image>
								</u-transition>
								<view class="every_bot">
									<view class="title">{{item.goods_name}}</view>
									<view class="price-con">￥{{item.goods_min_price}}</view>
								</view>
							</view>
						</view>
				</view>
				<view class="noShoping" v-if="!loading&&shoplist.length==0">
								<image src="../../static/images/noShop.png" mode="widthFix"></image>
								暂无商品
				</view>
				<!-- 底部加载提示 -->
				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
			</view>
		</u-transition>
		<!-- #ifdef APP-PLUS -->
		<app-update ref="app_update" :force="false" :tabbar="false" :typeShow="typeShow"></app-update>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data(){
			return{
				search:'',
				banner:[],
				navlist:[],
				last_page:1,
				page:1,
				zhuanqu:{},
				shoplist:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
				show: true,
				loading: true,
				typeShow: false,
				typenum:-1,
				categoryList:[],
				category_id:0
			}
		},
		onUnload() {
			this.shoplist = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
		},
		onReachBottom() {
			if(this.shoplist.length){
				this.page = this.page + 1
				if (this.page > this.last_page) {
					this.loadMoreText = "没有更多数据了!"
					return;
				}
				this.showLoadMore = true;
				this.getinit()
			}
		},
		onShow() {
			this.shoplist = []
			this.page = 1
			this.search = ""
			this.loading = true;
			this.request('/index/getBannerList').then(res => {
				if(res.data.code==1){
					this.banner = res.data.data
				}
			})
			this.request('/index/getNavLists').then(res => {
				if(res.data.code==1){
					this.navlist = res.data.data
				}
			})
			this.request('/index/getSpecialarea').then(res => {
				if(res.data.code==1){
					this.zhuanqu = res.data.data
				}
			})
			this.request('/goods/getCategoryAll',{type:1,data_type:1}).then(res=>{
				if(res.data.code == 1){
					this.categoryList = res.data.data.categoryList
					this.getinit()
				}
			})
			this.typeShow = false;
			// #ifdef APP-PLUS
			setTimeout(() => {
				this.$refs.app_update.update(); //调用子组件 检查更新
			}, 500)
			// #endif
		},
		methods:{
			getinit(){
				this.request('/goods/getCategoryGoodsList',{category_id:this.category_id,page:this.page}).then(res => {
					if(res.data.code==1){
						if(this.page==1){
							this.shoplist = res.data.data.data
						}else{
							this.shoplist = this.shoplist.concat(res.data.data.data)
						}
						this.last_page = res.data.data.last_page
						this.loading = false
					}
				})
			},
			lunboimg(link_url, link_type,name) {
				if (link_type == 10 && link_url.indexOf("http")==-1) {
					if (link_url.indexOf("?type=1") != -1) {
						uni.switchTab({
							url: link_url
						});
					} else {
						uni.navigateTo({
							url: link_url
						});
					}
				} else {
					// #ifdef H5
					window.location.href = link_url
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openWeb(link_url)
					// #endif
				}
			},
			searchBtn(){
				uni.navigateTo({
				    url: 'searchHistory?goods_name='+this.search
				})
			},
			tabindex(index,category_id){
				this.typenum=index
				this.category_id=category_id
				if(this.page!=1){
					this.page=1
					this.shoplist=[]
				}	
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
				this.show = true;
				this.loading = true;
				this.getinit()
			},
			navdetail(category_id){
				if(category_id==1){
					uni.navigateTo({
					    url: '/pages/classify/integral'
					});
				}else{
					uni.navigateTo({
					    url: 'classifylist?id='+category_id
					});
				}
			},
			qianggzq(route){
				this.request('/index/rest').then(res => {
					if(res.data.code==1){
						uni.navigateTo({
						    url: route
						});
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		min-height: 100%;
		background: $uni-background-color;
		.content{
			padding-bottom: 100rpx;
			.smlcon{
				background: linear-gradient(to top,$uni-background-color,#FFFFFF);
			}
			.topBox{
				position: fixed;
				top: 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				z-index: 99;
				padding: 80rpx 4% 20rpx;
				box-sizing: border-box;
				/* #ifdef H5 */
				padding: 16rpx 4%;
				/* #endif */
				.msgBox{
					position: relative;
					right: -10rpx;
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.seachBox{
					position: relative;
					display: flex;
					justify-content: space-between;
					height: 60rpx;
					width: 90%;
					border: 2rpx solid $uni-item-color;
					border-radius: 60rpx;
					padding-left: 3%;
					box-sizing: border-box;
					>view{
						width: 80%;
						display: flex;
						align-items: center;
						image{
							width: 34rpx;
							height: 34rpx;
							margin-right: 10rpx;
						}
						input{
							width: 86%;
							font-size:24rpx;
						}
					}
					>text{
						position: absolute;
						right: -2rpx;
						top: -2rpx;
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						text-align: center;
						background: $uni-item-color;
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
			.page-section-spacing{
				position: relative;
				height: 320rpx;
				/* #ifdef H5 */
				margin: 120rpx 4% 0;
				/* #endif */
				/* #ifdef APP-PLUS */
				margin: 170rpx 4% 0;
				/* #endif */
				image{
					width: 100%;
					height: 320rpx;
					border-radius: 10rpx;
				}
				swiper{
					height: 100% !important;
				}
			}
			.navbar{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				>view{
					width: 20%;
					text-align: center;
					margin-top: 40rpx;
					view{
						text-align: center;
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #666;
					}
				}
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.unique {
				text-align: center;
				margin-top: 30rpx;
				image {
					width: 92%;
					height: 60rpx;
				}
			}
			
			.special-area{
				margin: 20rpx 4% 0;
				display: flex;
				justify-content: space-between;
				view{
					&:first-of-type{
						image{
							width: 300rpx;
							height: 400rpx;
						}
					}
					&:last-of-type{
						text-align: right;
						image{
							width: 370rpx;
							height: 190rpx;
							&:last-of-type{
								margin-top: 20rpx;
							}
						}
					}
				}
			}
			.shop-con{
				margin-top: 10rpx;
				.fenlei{
					overflow-y: hidden;
					overflow-x: auto;
					white-space: nowrap;
					width: 96%;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 4%;
					&::-webkit-scrollbar{
					  display:none;
					}
					text{
						display: inline-block;
						position: relative;
						height: 100%;
						text-align: center;
						color: #B2B2B2;
						margin-right: 30rpx;
					}
					.active{
					    color: #323232;
						font-size: 32rpx;
						font-weight: 800;
						&::after{
							content:'';
							position: absolute;
							bottom: 0;
							width: 57rpx;
							height: 6rpx;
							background-color: $uni-item-color;
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
				.shop_list{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 0 4% 30rpx;
					.every{
						overflow: hidden;
						width: 335rpx;
						margin-top: 30rpx;
						border-radius: 10rpx;
						background: #fff;
						.cont_center{
							width: 100%;
							height: 335rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
						image{
							width: 100%;
							height: 335rpx;
						}
						.every_bot{
							padding: 0 20rpx;
							.title{
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp:2;
								/*! autoprefixer: off */
								-webkit-box-orient: vertical;
								/* autoprefixer: on */
								line-height: 34rpx;
								font-size: 26rpx;
								margin-top: 20rpx;
								height: 70rpx;
							}
							.price-con{
								color: $uni-text-color;
								font-weight: 800;
								margin-left: -4rpx;
								padding: 18rpx 0;
							}
						}
					}
				}
			}
		}
	}
	.noShoping{
			display: flex;
		    flex-direction: column;
			align-items: center;
			color: #bfbfbf;
			padding: 200rpx 0;
			image{
				width: 30%;
			}
		}
</style>